<template>
  <div>
    <div class="container1" style="margin-top:0.5rem;">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">银行办卡查询条件</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="80px" style="margin-bottom:-10px;margin-top:10px;">
        <el-form-item label="姓名">
          <el-input v-model="searchObj.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchObj.phone" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="searchObj.identity" placeholder="请输入身份证号" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属企业">
          <el-input v-model="searchObj.company" placeholder="请输入公司名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="申请时间" v-if="radioStatus == '待办卡'">
          <el-date-picker v-model="searchObj.applyTime" unlink-panels align="right" type="daterange" value-format="yyyyMMdd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin-left:2rem;">
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top:1rem;">
      <div class="common-list-class">
        <div style="display:flex;">
          <el-radio-group v-model="radioStatus" @change="radioStatusChange">
            <el-radio-button label="待办卡"></el-radio-button>
            <el-radio-button label="可办卡"></el-radio-button>
            <el-radio-button label="已办卡"></el-radio-button>
          </el-radio-group>
        </div>
        <div style="display:flex;" v-if="radioStatus == '待办卡'">
          <!-- <el-upload class="upload-file" :headers="uploadHeader" :before-upload="beforeUpload" :action="uploadUrl" :on-success="uploadSucess" :on-error="uploadError" :show-file-list="false">
            <el-button type="primary" icon="el-icon-download">上传备案表</el-button>
          </el-upload> -->
          <!-- <el-button type="primary" size="mini" style="height:32px;margin-left:10px;" @click="allExportClick" icon="el-icon-position">下载模版</el-button> -->
          <el-button type="primary" style="height:32px;margin-left:10px;" @click="alldaochuClick" icon="el-icon-upload2">完善信息</el-button>
        </div>
      </div>
      <!-- 查询列表 -->
      <div v-if="radioStatus == '待办卡'">
        <el-table :data="notableData" ref="notableData" :row-style="rowStyle" :header-cell-style="tableHeaderColor" size="mini" style="width: 100%;margin-top:10px;margin-bottom:10px;" @selection-change="handleSelectionChange" max-height="550" border>
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="companyName" label="公司名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operateName" label="申请人" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operateTime" label="申请时间" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operatePhone" label="申请人电话" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operateNum" label="备案人数" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" icon="el-icon-tickets" @click="nodetailsClick(scope.row)">调离</el-button>
              <el-button type="success" size="mini" icon="el-icon-lx-apps" @click="integralClick(scope.row)">通过</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="radioStatus == '可办卡'">
        <el-table :data="matterData" ref="matterData" :row-style="rowStyle" :header-cell-style="tableHeaderColor" size="mini" style="width: 100%;margin-top:10px;margin-bottom:10px;" @selection-change="handleSelectionChange" max-height="550" border>
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="companyName" label="公司名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operateName" label="申请人" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operateTime" label="申请时间" width="200" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operatePhone" label="申请人电话" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="operateNum" label="备案人数" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="250" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="primary" size="mini" icon="el-icon-tickets" @click="nodetailsClick(scope.row)">详情</el-button> -->
              <el-button type="success" size="mini" icon="el-icon-lx-apps" @click="integralClick(scope.row)">通过</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="radioStatus == '已办卡'">
        <el-table :data="hastableData" ref="hastableData" :row-style="rowStyle" :header-cell-style="tableHeaderColor" size="mini" style="width: 100%;margin-top:10px;margin-bottom:10px;" @selection-change="handleSelectionChange" max-height="550" border>
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="componentName" label="公司名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="surveyApplyTime" label="申请时间" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="labourName" label="劳务公司" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="surveyTime" label="审核时间" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="surveyStatus" label="备案结果" width="100" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              {{surveyStatusObj[scope.row.surveyStatus]}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-view" @click="queryDanger(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">完善信息</el-button>
              <!-- <el-button type="success" size="mini" icon="el-icon-lx-apps" @click="integralClick(scope.row)">积分</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>
    <!-- 导入成功或失败列表 -->
    <el-dialog title="导入列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="daoruFlag" width="80%" :before-close="daoruClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">导入列表</div>
      </div>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入成功列表</div>
      </div>
      <el-table :data="successList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="identity" label="身份证号" width="200" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="componentCode" label="公司编码" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="surveyStatus" label="备案是否通过" width="150" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{surveyStatusObj[scope.row.surveyStatus]}}
          </template>
        </el-table-column>
        <el-table-column prop="surveyReason" label="备案不通过原因" show-overflow-tooltip align="center">
        </el-table-column>
      </el-table>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入失败列表</div>
      </div>
      <el-table :data="failList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入姓名" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="identity" label="身份证号" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.identity" placeholder="请输入身份证号" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="componentCode" label="公司编码" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.componentCode" placeholder="请输入公司编码" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="surveyStatus" label="备案是否通过" width="200" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.surveyStatus" placeholder="请选择是否通过" style="width:100%;">
              <el-option v-for="item in passList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="surveyReason" label="备案不通过原因" width="200" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.surveyReason" placeholder="请输入" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="失败原因" width="200" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-success" @click="confirmClick(scope.row)">确定</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete-solid" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" :disabled="failList.length !== 0" @click="daoruClick">提交</el-button>
        <el-button size="mini" @click="daoruClose">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 备案登记 -->
    <el-dialog title="备案登记" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="fxhcFlag" width="40%" :before-close="fxhcClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">备案登记</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="18">共有<span style="color:red;font-size:16px;font-weight:bold;">{{selectList.length}}</span>人需要备案登记：</el-col>
      </el-row>
      <el-row type="flex" justify="center" v-for="(item,index) in fxhcDetails" :key="index">
        <el-col :span="14" class="bold-class">{{item.name}}</el-col>
        <el-col :span="4" class="grey-class">{{item.number}}人</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18" style="color:#b7b7b7;font-size:12px;"><i class="el-icon-s-opportunity" style="color:#F6AE56;"></i>温馨提示：您的申请将会有专员进行处理，请耐心等待</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="applicationClick">提 交</el-button>
        <el-button size="mini" @click="fxhcClose">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 查看风险 -->
    <el-dialog title="查看风险" :close-on-click-modal="false" class="dialog_common_class" :close-on-press-escape="false" :visible.sync="dangerFlag" width="35%" :before-close="dangerClose">
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">查看风险</div>
      </div>
      <div class="danger_accept_class">
        <div class="danger_accept_text">
          该人员审核未通过！具备以下风险：
        </div>
      </div>
      <el-row type="flex" justify="center" v-for="(item,index) in imageList" :key="index" style="margin-top:5px;">
        <el-col :span="2"><img style="width:20px;height:20px;" :src="item.url" /></el-col>
        <el-col :span="4">{{item.title}}</el-col>
      </el-row>
      <div class="passUrl_class"><img :src="passUrl" /></div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dangerClose">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 警员详情 -->
    <el-dialog title="劳务工详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="60%" :before-close="detailsClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">劳务工详情</div>
      </div>
      <div style="height:500px;overflow: auto;">
        <div class="basic_information_class">
          <div class="avator_class">
            <el-row type="flex" justify="center" style="margin-top:1rem;">
              <el-image :src="imageUrl" style="height:210px;" fit="fill"></el-image>
            </el-row>
          </div>
          <div class="avator_right_class">
            <el-row type="flex" justify="center" style="margin-top:1rem;">
              <el-col :span="4" class="bold-class">姓名</el-col>
              <el-col :span="5" class="grey-class">{{employeeInfo.name}}</el-col>
              <el-col :span="4" class="bold-class">性别</el-col>
              <el-col :span="4" class="grey-class">{{employeeDetails.sexDesc}}</el-col>
              <el-col :span="4" class="bold-class">民族</el-col>
              <el-col :span="4" class="grey-class">{{employeeDetails.nation}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">出生年月</el-col>
              <el-col :span="5" class="grey-class">{{employeeDetails.birthday}}</el-col>
              <el-col :span="4" class="bold-class">年龄</el-col>
              <el-col :span="4" class="grey-class">{{employeeDetails.age}}</el-col>
              <el-col :span="4" class="bold-class">婚姻状态</el-col>
              <el-col :span="4" class="grey-class">{{employeeDetails.isMarryDesc}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">邮箱</el-col>
              <el-col :span="5" class="grey-class">{{employeeDetails.email}}</el-col>
              <el-col :span="4" class="bold-class">联系电话</el-col>
              <el-col :span="12" class="grey-class">{{employeeInfo.phone}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">籍贯</el-col>
              <el-col :span="5" class="grey-class">{{employeeDetails.nativePlace}}</el-col>
              <el-col :span="4" class="bold-class">身份证号</el-col>
              <el-col :span="12" class="grey-class">{{employeeInfo.identity}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">家庭住址</el-col>
              <el-col :span="21" class="grey-class">{{employeeDetails.nativeAddr}}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">现住地址</el-col>
              <el-col :span="21" class="grey-class">{{employeeDetails.presentAddr}}</el-col>
            </el-row>
          </div>
        </div>
        <el-divider>学历信息</el-divider>
        <el-table :data="educateList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
          <el-table-column prop="beginTime" label="入学日期" width="80" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="毕业日期" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="schoolName" label="毕业院校" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="major" label="专业" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="educationLevelDesc" label="学历" width="120" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-divider>工作经历</el-divider>
        <el-table :data="workList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
          <el-table-column prop="beginTime" label="开始时间" width="80" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="companyName" label="单位名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="position" label="岗位" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="leaveReason" label="辞职原因" width="120" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="hasCertifyDesc" label="是否有证明材料" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-divider>家庭信息</el-divider>
        <el-table :data="familyList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
          <el-table-column prop="familyName" label="姓名" width="80" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyRelativeDesc" label="与本人关系" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyBirth" label="出生年月" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="componentName" label="工作单位" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyPosition" label="担任职务" width="120" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyPhone" label="联系电话" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-col :span="4" class="bold-class">在本公司有无熟人</el-col>
          <el-col :span="4" class="grey-class">{{employeeDetails.hasFriendDesc}}</el-col>
          <el-col :span="4" class="bold-class">姓名</el-col>
          <el-col :span="4" class="grey-class">{{employeeDetails.friendName}}</el-col>
          <el-col :span="4" class="bold-class">联系电话</el-col>
          <el-col :span="4" class="grey-class">{{employeeDetails.friendPhone}}</el-col>
        </el-row>
        <el-divider>紧急联系人</el-divider>
        <el-table :data="judgeList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
          <el-table-column prop="familyName" label="姓名" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familySexDesc" label="性别" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyRelativeDesc" label="与本人关系" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyPhone" label="联系方式" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-col :span="4" class="bold-class">是否住宿</el-col>
          <el-col :span="10" class="grey-class">{{employeeDetails.isDormDesc}}</el-col>
          <el-col :span="4" class="bold-class">招聘渠道</el-col>
          <el-col :span="10" class="grey-class">{{employeeDetails.recruitmentChannels}}</el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "laborer",
  mixins: [mixin],
  data() {
    return {
      passUrl: require("../../assets/img/educate/fx_wtg.png"),
      imgList: [
        require("../../assets/img/educate/fx_icon1.png"),
        require("../../assets/img/educate/fx_icon2.png"),
        require("../../assets/img/educate/fx_icon3.png"),
        require("../../assets/img/educate/fx_icon4.png"),
        require("../../assets/img/educate/fx_icon5.png"),
      ],
      imageList: [
        {
          url: require("../../assets/img/educate/fx_icon1.png"),
          title: "精神疾病",
        },
        {
          url: require("../../assets/img/educate/fx_icon2.png"),
          title: "精神疾病2",
        },
        {
          url: require("../../assets/img/educate/fx_icon3.png"),
          title: "精神疾病3",
        },
        {
          url: require("../../assets/img/educate/fx_icon4.png"),
          title: "精神疾病4",
        },
        {
          url: require("../../assets/img/educate/fx_icon5.png"),
          title: "精神疾病4",
        },
      ],
      imageUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      employeeInfo: {},
      employeeDetails: {},
      judgeList: [],

      workList: [],
      educateList: [],
      familyList: [],
      dangerFlag: false,
      daoruFlag: false,
      passList: [
        {
          value: "3",
          label: "通过",
        },
        {
          value: "2",
          label: "未通过",
        },
      ],
      surveyStatusObj: {
        2: "未通过",
        3: "通过",
      },
      fxhcDetails: [],
      radioStatus: "待办卡",
      fxhcFlag: false,
      uploadHeader: {},
      uploadUrl: "/wgry/labour/importCheck",
      rules: {
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        userpwd: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入警员姓名", trigger: "blur" }],
        code: [{ required: true, message: "请输入警员警号", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        area: [
          { required: true, message: "请选择所属责任区", trigger: "change" },
        ],
        apartment: [
          { required: true, message: "请选择所属部门", trigger: "change" },
        ],
        currentPosition: [
          { required: true, message: "请选择当前岗位", trigger: "change" },
        ],
      },
      detailsObj: {
        username: "12321123",
        userpwd: "123",
        name: "张三",
        code: "123001",
        phone: "1356454545",
        apartment: "部门22",
        currentPosition: "当前位置11",
        telephone: "025-21321312",
      },
      inputObj: {
        username: "",
        userpwd: "",
        name: "",
        code: "",
        phone: "",
        area: [],
        apartment: "",
        currentPosition: "",
        telephone: "",
      },
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      notableData: [],
      matterData: [],
      hastableData: [],
      surveyStatusList: [
        {
          value: "4",
          label: "全部",
        },
        {
          value: "3",
          label: "通过",
        },
        {
          value: "2",
          label: "不通过",
        },
      ],
      searchObj: {
        surveyStatus: "4",
        laborerName: "",
        name: "",
        company: "",
        phone: "",
        applyTime: [],
      },
      selectList: [],
      failList: [],
      successList: [],
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    this.initDataList();
  },
  methods: {
    dangerClose() {
      this.dangerFlag = false;
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    hasinitDataList() {
      let params = {
        name: this.searchObj.name,
        labourName: this.searchObj.laborerName,
        phone: this.searchObj.phone,
        pageNumber: this.currentPage,
        surveyStatus: this.searchObj.surveyStatus,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/labour/queryEmployeeChecked`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.hastableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.currentPage = res.data.data.pageNum;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err.response.data.message,
            type: "error",
          });
        });
    },
    matterDataList() {
      let params = {
        name: this.searchObj.name,
        componentName: this.searchObj.company,
        phone: this.searchObj.phone,
        processStatus: 1,
        processType: 2,
        beginTime: this.searchObj.applyTime ? this.searchObj.applyTime[0] : "",
        endTime: this.searchObj.applyTime ? this.searchObj.applyTime[1] : "",
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/labour/queryEmployeeForCheck`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.matterData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err.response.data.message,
            type: "error",
          });
        });
    },
    // 关闭
    daoruClose() {
      this.daoruFlag = false;
    },
    // 提交
    daoruClick() {
      let self = this;
      let params = self.successList;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/labour/editEntryCheck`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.daoruFlag = false;
            self.$message({
              message: "提交成功！",
              type: "success",
            });
            self.initDataList();
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 确认
    confirmClick(row) {
      let self = this;
      if (
        !row.name ||
        !row.identity ||
        !row.componentCode ||
        !row.surveyStatus
      ) {
        self.$message({
          message: "请输入必填字段再提交！",
          type: "error",
        });
        return;
      }
      let params = row;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/labour/validateFailCheck`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.failList.forEach((item, index) => {
              if (item.id == row.id) {
                self.failList.splice(index, 1);
              }
            });
            self.successList.push(res.data.data);
            self.$message({
              message: "校验成功！",
              type: "success",
            });
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 删除
    deleteClick(row) {
      let self = this;
      self.failList.forEach((item, index) => {
        if (item.id == row.id) {
          self.failList.splice(index, 1);
        }
      });
      self.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    initDataList() {
      let params = {
        name: this.searchObj.name,
        componentName: this.searchObj.company,
        phone: this.searchObj.phone,
        processStatus: 0,
        processType: 2,
        // beginTime: this.searchObj.applyTime ? this.searchObj.applyTime[0] : "",
        // endTime: this.searchObj.applyTime ? this.searchObj.applyTime[1] : "",
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/labour/queryEmployeeForCheck`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.notableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err.response.data.message,
            type: "error",
          });
        });
    },
    allExportClick() {
      console.log("this.modelUrl------------>:", this.modelUrl);
      let url = `${this.modelUrl}备案登记导入模板.xls`;
      window.open(url);
    },
    alldaochuClick() {
      let self = this;
      if (!self.selectList || !self.selectList.length) {
        self.$message.error("请先选择导出数据！");
        return;
      }
      self.showLoading("操作中");
      let params = {
        processIds: self.selectList.map((value) => value["processCode"]),
      };
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/outSource/exportOutSourceWorkerInfoList`,
          responseType: "blob",
          data: params,
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", "快速备案导出.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
            self.query();
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    handleSelectionChange(value) {
      this.selectList = value;
    },
    radioStatusChange(value) {
      this.radioStatus = value;
      if (this.radioStatus == "待备案") {
        this.initDataList();
      } else if (this.radioStatus == "备案中") {
        this.matterDataList();
      } else {
        this.hasinitDataList();
      }
    },
    beforeUpload(file) {
      this.showLoading("导入中");
    },
    uploadSucess(response) {
      this.hideLoading();
      if (response.code == "20000") {
        this.daoruFlag = true;
        this.$message({
          message: "导入成功！",
          type: "success",
        });
        this.failList = response.data.failList;
        this.successList = response.data.list;
        console.log("response---->:", response);
      } else {
        this.$message({
          message: response.message,
          type: "error",
        });
      }
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    applicationClick() {
      let list = [];
      this.selectList.forEach((item) => {
        list.push({
          id: item.id,
          openId: item.openId,
          componentCode: item.componentCode,
          surveyStatus: "1",
        });
      });
      let params = {
        ids: list,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/labour/checkLabor`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.fxhcFlag = false;
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.initDataList();
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err.response.data.message,
            type: "error",
          });
        });
    },
    fxhcClose() {
      this.fxhcFlag = false;
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      if (this.radioStatus == "待备案") {
        this.initDataList();
      } else if (this.radioStatus == "备案中") {
        this.matterDataList();
      } else {
        this.hasinitDataList();
      }
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      if (this.radioStatus == "待备案") {
        this.initDataList();
      } else if (this.radioStatus == "备案中") {
        this.matterDataList();
      } else {
        this.hasinitDataList();
      }
    },
    // 查询
    query() {
      if (this.radioStatus == "待备案") {
        this.initDataList();
      } else if (this.radioStatus == "备案中") {
        this.matterDataList();
      } else {
        this.hasinitDataList();
      }
    },
    //  重置
    reset() {
      this.searchObj = {
        name: "",
        company: "",
        phone: "",
        applyTime: [],
        laborerName: "",
        surveyStatus: "4",
      };
      if (this.radioStatus == "待备案") {
        this.initDataList();
      } else if (this.radioStatus == "备案中") {
        this.matterDataList();
      } else {
        this.hasinitDataList();
      }
    },
    queryDanger(row) {
      let self = this;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/labour/queryDetailForCheck/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            let dataList = res.data.data;
            let list = [];
            dataList.forEach((item) => {
              list.push({
                url: self.imgList[parseInt(Math.random() * 5)],
                title: item,
              });
            });
            self.imageList = list;
            self.dangerFlag = true;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    detailsClick(row) {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/labour/detailsEmployee/${row.openId}/0`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.detailsFlag = true;
            this.employeeInfo = res.data.data.employeeInfo || {};
            this.employeeDetails = res.data.data.employeeDetails || {};
            this.familyList = res.data.data.familyList || [];
            this.educateList = res.data.data.educationList || [];
            this.workList = res.data.data.workList || [];
            this.judgeList = res.data.data.contactList || [];
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
  },
};
</script>
<style scoped>
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 120px;
  height: 32px;
}
.display_image_class {
  display: flex;
  align-items: center;
}
.image_border_class {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.display_title_text {
  font-weight: bold;
}
.passUrl_class {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.danger_accept_class {
  display: flex;
  align-items: center;
  justify-content: center;
}
.danger_accept_text {
  font-weight: bold;
  border: 1px solid #f1bdbc;
  border-radius: 8px;
  padding: 8px;
  color: #e17c77;
  width: 300px;
  text-align: center;
  background: #fdf5f4;
}
</style>